<template>
  <div style="width: 100%; margin: 0px auto;">
    <div style="padding-bottom: 5px;">
      <el-button  :type="showType===1?'warning':''" @click="showType=1">Vip介绍</el-button>
      <el-button :type="showType===0?'warning':''" @click="showType=0">Vip等级介绍</el-button>
    </div>
    <div style="padding-top: 5px;" v-show="showType===1">
      <div style="font-weight: bold; font-size: 14px;">
        Vip服务说明:
      </div>
      <div style="text-indent: 10px">
        (1).会员通过购买《可可商城会员》体验会员权益,权益包含已下4点:
      </div>
      <div style="text-indent: 20px">
        <p>(1-1).下单折扣(部分等级)</p>
        <p>(1-2).下单免运费(部分等级)</p>
        <p>(1-3).签到额外赠送积分</p>
        <p>(1-4).下单额外赠送积分</p>
        <p>(1-5).升级奖励积分</p>
      </div>
      <div style="text-indent: 10px">
        (2).积分可以在积分商城兑换商品
      </div>
      <div style="text-indent: 10px">
        (3).Vip购买期限和价格(1个月指的是一个自然月,如: 10月1日到11月1日)购买方式【微信】【支付宝】,价格如下:
      </div>
      <div style="text-indent: 20px">
        <p>1个月		20.00元</p>
        <p>3个月		58.00元</p>
        <p>6个月		110.00元</p>
        <p>12个月		200.00元</p>
      </div>
      <div style="text-indent: 10px">
        每次购买都是单独的，暂时未提供【自动续费/自动订阅】连续扣费机制，每次购买后当时即生效
      </div>
      <div style="text-indent: 10px">
        (4).升级为Vip的用户,每天可以获得成长值,成长值增加到一定阶段会升级高级Vip,享受更大力度优惠
      </div>
      <div style="text-indent: 10px">
        (5).各等级介绍请查看上面【Vip等级介绍】
      </div>

    </div>
    <el-table
      header-cell-class-name="level-table"
      v-if="levelTableArr.length>0 && showType===0"
      :data="levelTableArr"
      border
      style="width: 100%">
      <el-table-column
        v-for="(currLevel,index) in levelArr"
        :key="index"
        :class-name="currLevel.level===$props.currLevel && $props.currLevel>0?'curr-level':''"
        prop="date"
        :label="index===0?'-':currLevel.name"
        :width="index===0?95:''"
        align="center">
        <template slot-scope="scope">
          <div v-html="showValue(index,scope.$index,scope.row['level-'+currLevel.level])"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'LevelInfoBox',
  props:{
    currLevel:Number,
  },
  data:function () {
    return {
      showType:1,
      levelArr:dict.VipLevelList,
      levelTableArr:[],
      fieldArr:[],
      levelNameMap:{
        ex:'升级所需<br>(成长值)',
        dailyAddEx:'每日增加<br>(成长值)',
        signAddScore:'签到额外<br>(积分)',
        completeDealAddScore:'完成交易<br>(积分)',
        completeUplevelAddScore:'升级奖励<br>(积分)',
        orderDiscount:'下单折扣',
        isOrderFreeSendPrice:'下单免运费',
      },
    }
  },
  mounted () {
    this.generateTableArr()
  },
  methods:{
    showValue:function (colIndex,fieldIndex,value) {
      var field = this.fieldArr[fieldIndex]
      if (colIndex===0){
        return this.levelNameMap[field]
      }
      // 完整交易赠送积分
      if (field==='completeDealAddScore'){
        if (value===0){
          return '-'
        }else{
          return Math.ceil(value*100)+'%'
        }
      }
      // 下单折扣
      if (field==='orderDiscount'){
        if (value===1){
          return '-'
        }else{
          return (value*10).toFixed(1)+'折'
        }
      }
      // 下单免运费
      if (field==='isOrderFreeSendPrice'){
        return value===1?'免运费':'-'
      }
      return value
    },
    generateTableArr:function () {
      let $this=this
      $this.fieldArr=['ex','dailyAddEx','signAddScore','completeDealAddScore','completeUplevelAddScore','orderDiscount','isOrderFreeSendPrice']
      $this.levelArr.forEach(function (_value, _index) {
        $this.levelNameMap['level-'+_value.level]=_value.name
      })
      $this.fieldArr.forEach(function (field, index) {
        var item={}
        $this.levelArr.forEach(function (_value, _index) {
          item['level-'+_value.level]=_value[field]
        })
        $this.levelTableArr.push(item)
      })
    }
  }
}
</script>

<style>
/*.c{background:'#EEEEEE';color:'#000000';}*/
.el-table th.level-table{ background: #EEEEEE; color: #333333;}
.el-table th.level-table.curr-level{ background: #e7fcf8; color: #333333;}
.el-table--enable-row-transition .el-table__body td.el-table__cell.curr-level{background: #e7fcf8; color: #d22e2e; font-weight: bold}
</style>
